<!-- 
1. 怎么显示坐标轴标题
 -->
<template>
    <div>
        <div id="c1"></div>
    </div>
</template>

<script>
import G2 from "@antv/g2";
export default {
    data() {
        return {
            a: 1
        };
    },

    components: {},

    computed: {},
    beforeCreate(){
        // console.log(this.$watch)
        // console.log(this.$data)  //undefined
    },
    mounted() {
        const chart = new G2.Chart({
            container: 'c1',
            width: 1000,
            height: 500
        });
        const data = [
            { type: 'A', value: 100 },
            { type: 'B', value: 99 },
            { type: 'C', value: 1000 }
        ];
        
        chart.source(data)
        chart.scale('type', {
            type: 'cat', // 声明 type 字段为分类类型
            values: [ 'A', 'B', 'C' ], // 重新显示的值
            alias: '类型xxxx' // 设置属性的别名
        });
        chart.scale('value', {
            type: 'log', // 声明 value 字段为分类类型
            base: 10,
            alias: 'Yfield' // 设置属性的别名
        });
        chart.axis('value', {
            title: {
                textStyle: {
                    fontSize: 12, // 文本大小
                    textAlign: 'center', // 文本对齐方式
                    fill: '#999', // 文本颜色
                    // ...
                }
            } // 展示 xField 对应坐标轴的标题
        });
        chart.interval().position('type*value').color('type','#1f77b4-#ff7f0e-#2ca02c')
        chart.render()
    },

    methods: {}
};
</script>
<style lang='less' scoped>
</style>